<template>
  <div>
    <!-- 重跑任务对话框 BEGIN -->
    <el-dialog v-if="redoTask"
               :visible.sync="taskRedoDialogVisible"
               width="60%"
               :show-close="true">
      <div slot="title">
        <el-row>
          <el-col :span="20">
            <el-tag>任务ID:{{redoTask.id}}</el-tag>
            <el-divider direction="vertical"></el-divider>
            <el-tag>任务状态:{{getDictLabel('task_status', redoTask.status)}}</el-tag>
            <el-divider direction="vertical"></el-divider>
            <el-tag>确定重跑吗？ 请输入备注说明一下原因.</el-tag>
          </el-col>
          <el-col :span="4">
            <el-button circle
                       size="mini"
                       type="success"
                       plain
                       @click="handleTaskRedoConfirm()">确定重跑</el-button>
          </el-col>
        </el-row>
      </div>
      <el-input type="textarea"
                rows="5"
                v-model="remark"></el-input>
      </el-form>
    </el-dialog>
    <!-- 重做任务对话框 END -->
    <!-- 撤销任务对话框 BEGIN -->
    <el-dialog v-if="cancelTask"
               :visible.sync="taskCancelDialogVisible"
               width="60%"
               :show-close="true">
      <div slot="title">
        <el-row>
          <el-col :span="20">
            <el-tag>任务ID:{{cancelTask.id}}</el-tag>
            <el-divider direction="vertical"></el-divider>
            <el-tag>任务状态:{{getDictLabel('task_status', cancelTask.status)}}</el-tag>
            <el-divider direction="vertical"></el-divider>
            <el-tag>请输入备注说明一下原因.</el-tag>
            <el-divider direction="vertical"></el-divider>
            <el-tooltip placement="bottom"
                        effect="light">
              <div slot="content">
                <template v-if="hintLine1 !=''">
                  {{hintLine1}}
                </template>
                <template v-if="hintLine2 !=''">
                  <br />
                  {{hintLine2}}
                </template>
                <template v-if="hintLine3 !=''">
                  <br />
                  {{hintLine3}}
                </template>
              </div>
              <el-button size="mini"
                         circle
                         icon="el-icon-chat-line-round"></el-button>
            </el-tooltip>
          </el-col>
          <el-col :span="4">
            <el-button circle
                       size="mini"
                       type="success"
                       plain
                       @click="handleTaskCancelConfirm()">确定提交</el-button>
          </el-col>
        </el-row>
      </div>
      <el-row style="margin-bottom: 10px;">
        <el-radio-group v-model="radioDestStatus">
          <el-radio v-for="item in radioOptions"
                    :key="item.name"
                    :label="item.name">{{item.label}}</el-radio>>
        </el-radio-group>
      </el-row>
      <el-row style="margin-bottom: 10px;">
        <el-input type="textarea"
                  rows="5"
                  v-model="remark"></el-input>
      </el-row>
      </el-form>
    </el-dialog>
    <!-- 撤销任务对话框 END -->
    <el-tabs closable
             v-model="editableTabsValue"
             type="border-card"
             @tab-remove="removeTab"
             :height="taskProcessTableHeight">
      <el-tab-pane name="-1"
                   :height="taskProcessTableHeight">
        <span slot="label"><i v-if="myJob.iconClass"
             :class="myJob.iconClass"></i><i v-else
             class="el-icon-s-operation"></i>任务记录</span>
        <el-card shadow="never">
          <div slot="header">
            <el-row>
              <el-col :span="24">
                <el-tag>{{myJob.jobName}}</el-tag>
                <el-divider direction="vertical"></el-divider>
                <el-tag>
                  <i class="el-icon-star-on"></i>
                  {{currentProcessId}}
                </el-tag>
                <el-checkbox v-model="checkedRefresh"
                             @change="checkBoxRefreshChange">实时刷新</el-checkbox>
                </el-button>
                <el-popconfirm title="将为该作业生成新的任务，确定吗？"
                               confirmButtonText='确定'
                               cancelButtonText='点错了，不要执行'
                               icon="el-icon-info"
                               iconColor="red"
                               @onConfirm="handleCreateTaskComfirm()">
                  <el-button :disabled="checkCreateNewDisabled(currentProcess.status) || myJob.izEnabled == '0'"
                             circle
                             size="mini"
                             slot="reference"
                             type="success"
                             plain>启动新任务</el-button>
                </el-popconfirm>
                <el-divider direction="vertical"></el-divider>
                <el-button circle
                           size="mini"
                           type="success"
                           plain
                           @click="handleListTaskBefore()">向前翻页</el-button>
                <el-button circle
                           size="mini"
                           type="success"
                           plain
                           @click="handleListTaskAfter()">向后翻页</el-button>

              </el-col>
            </el-row>
          </div>
          <el-table :data="myJob.taskProcesses"
                    ref="taskProcessesTable"
                    border
                    row-key="id"
                    sortable
                    :height="taskProcessTableHeight"
                    style="width: 100%">
            <el-table-column label="任务ID"
                             align="center"
                             fixed
                             width="100">
              <template slot-scope="{row}">
                {{row.id}}
                <i class="el-icon-star-on"
                   v-if="row.id == currentProcessId"></i>
              </template>
            </el-table-column>
            <el-table-column label="计划时间"
                             align="center"
                             fixed
                             width="160">
              <template slot-scope="{row}">
                {{formatTime(row.scheduleTime)}}
              </template>
            </el-table-column>

            <el-table-column label="日志"
                             align="center"
                             width="50">
              <template slot-scope="{row}">
                <!-- {{ row.logFileName}} -->
                <el-button :disabled="row.logFileName ==null || row.logFileName ==''"
                           size="mini"
                           type="success"
                           icon="el-icon-tickets"
                           plain
                           circle
                           @click="handleLogFile(row)">
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="操作"
                             align="center"
                             width="50">
              <template slot-scope="{row}">
                <!-- {{ row.logFileName}} -->
                <el-button v-if="checkRedolEnable(row.status)"
                           :disabled="(row.hasRedo != '0') || checkCreateNewDisabled(currentProcess.status)"
                           size="mini"
                           type="success"
                           icon="el-icon-refresh-right"
                           plain
                           circle
                           @click="redoTask = row; taskRedoDialogVisible = true; remark='';">
                </el-button>
                <el-button v-else
                           size="mini"
                           type="success"
                           plain
                           circle
                           icon="el-icon-close"
                           @click="handleCancelClick(row)">
                </el-button>
              </template>
            </el-table-column>
            <el-table-column label="运行状态"
                             align="center"
                             width="100">
              <template slot-scope="{row}">
                {{ getDictLabel('task_status', row.status)}}
              </template>
            </el-table-column>
            <el-table-column label="创建类型"
                             align="center"
                             width="100">
              <template slot-scope="{row}">
                {{ getDictLabel('create_mode', row.createMode)}}
              </template>
            </el-table-column>
            <el-table-column label="原任务ID"
                             align="center"
                             width="100">
              <template slot-scope="{row}">
                <template v-if="row.id == row.oldId">
                  N/A
                </template>
                <template v-else>
                  {{row.oldId}}
                </template>
              </template>
            </el-table-column>
            <el-table-column label="开始运行时间"
                             align="center"
                             width="160">
              <template slot-scope="{row}">
                {{formatTime(row.startTime)}}
              </template>
            </el-table-column>
            <el-table-column label="结束运行时间"
                             align="center"
                             width="160">
              <template slot-scope="{row}">
                {{formatTime(row.stopTime)}}
              </template>
            </el-table-column>

            <el-table-column label="运行主机"
                             width="120">
              <template slot-scope="{row}">
                {{ row.hostName}}
              </template>
            </el-table-column>
            <el-table-column label="动作类型"
                             width="100">
              <template slot-scope="{row}">
                {{ getDictLabel('action_type', row.actionType)}}
              </template>
            </el-table-column>
            <el-table-column label="计划名称"
                             width="160">
              <template slot-scope="{row}">
                {{ row.crontabName}}
              </template>
            </el-table-column>

            <el-table-column label="进程号"
                             width="100">
              <template slot-scope="{row}">
                {{ row.instancePid}}
              </template>
            </el-table-column>
            <el-table-column label="返回码"
                             width="100">
              <template slot-scope="{row}">
                {{ row.returnCode}}
              </template>
            </el-table-column>
            <el-table-column label="启动命令"
                             width="360">
              <template slot-scope="{row}">
                {{ row.startCommand}}
              </template>
            </el-table-column>
            <el-table-column label="停止命令"
                             width="360">
              <template slot-scope="{row}">
                {{ row.stopCommand}}
              </template>
            </el-table-column>
            <el-table-column label="备注"
                             width="480">
              <template slot-scope="{row}">
                {{ row.remark}}
              </template>
            </el-table-column>
          </el-table>
          <!-- 历史任务记录 END. -->
        </el-card>
      </el-tab-pane>
      <!-- :label="'日志:'+item.id" -->
      <el-tab-pane v-for="(item, index) in myLogFileList"
                   :key="item.id"
                   :name="''+item.id">
        <span slot="label"><i v-if="item.iconClass"
             :class="item.iconClass"></i>日志:{{item.id}}</span>
        <task-log-file :myLogFile="item"></task-log-file>
      </el-tab-pane>
    </el-tabs>
    </el-scrollbar>
  </div>
</template>
<script>
import { formatDate } from "@/utils/date";
import { hasPermission, getEntries, getLabel } from "@/utils/dict";
import { apiTaskCurrent, apiTaskCreate, apiTaskRedo, apiTaskCancel, apiTaskList, apiTaskRefresh } from "@/api/monitor";
import TaskLogFile from "./TaskLogFile";

export default {
  components: { TaskLogFile },
  name: "JobExecutor",
  props: {
    myJob: {
      jobName: '默认值',
      izEnabled: '0'
    }
  },
  data() {
    return {
      intervalReader: null,
      refreshEndTime: null,
      currentProcessId: 0,
      currentProcess: { status: '3' },
      taskCancelDialogVisible: false,
      taskRedoDialogVisible: false,
      cancelTask: null,
      redoTask: null,
      checkedRefresh: false,
      focusPage: '历史记录',
      radioOption: '执行计划',
      myLogFileList: [],
      listLoading: false,
      conheight: {
        height: ''
      },
      editableTabsValue: '-1',
      taskProcessTableHeight: 460,
      consoleOn: false,
      remark: "",
      hintLine1: "",
      hintLine2: "",
      hintLine3: "",
      radioDestStatus: '',
      radioOptions: [],
      operatorOptions: [
        {
          status: '0',
          name: '未运行',
          hintLine1: '撤销后该任务将进入取消状态',
          hintLine2: '',
          hintLine3: '',
          radioOptions: [
            {
              name: 'e',
              label: '任务取消'
            }
          ]
        },
        {
          status: '1',
          name: '准备启动',
          hintLine1: '正在等待运行主机接收启动指令',
          hintLine2: '如果任务长期处理此状态, 可能是运行主机异常',
          hintLine3: '请根据任务依赖和实际情况选择它的终止状态',
          radioOptions: [
            {
              name: 'e',
              label: '任务取消'
            },
            {
              name: '3',
              label: '正常结束'
            },
            {
              name: '5',
              label: '异常停止'
            },
          ]
        },
        {
          status: '2',
          name: '正在运行',
          hintLine1: '该任务正在运行',
          hintLine2: '如无异常, 建议选择停止任务来发送停止指令',
          hintLine3: '如有异常, 请根据任务依赖和实际情况选择它的终止状态',
          radioOptions: [
            {
              name: '9',
              label: '停止任务'
            },
            {
              name: 'e',
              label: '任务取消'
            },
            {
              name: '3',
              label: '正常结束'
            },
            {
              name: '5',
              label: '异常停止'
            },
          ]
        },
        {
          status: '4',
          name: '错过停止',
          hintLine1: '此状态异常状态',
          hintLine2: '一般是本系统数据库服务异常,请查实原因',
          hintLine3: '如果任务现在还在运行建议发送停止指令, 或者根据任务依赖和实际情况选择它的终止状态',
          radioOptions: [
            {
              name: '9',
              label: '停止任务'
            },
            {
              name: 'e',
              label: '任务取消'
            },
            {
              name: '3',
              label: '正常结束'
            },
            {
              name: '5',
              label: '异常停止'
            },
          ]
        },
        {
          status: '7',
          name: '检测依赖',
          hintLine1: '此任务正在等待满足它设定的启动依赖, 准备进入启动状态',
          hintLine2: '请检查启动依赖相关作业, 如有异常, 请根据根据任务依赖和实际情况选择它的终止状态',
          hintLine3: '',
          radioOptions: [
            {
              name: 'e',
              label: '任务取消'
            },
            {
              name: '3',
              label: '正常结束'
            },
            {
              name: '5',
              label: '异常停止'
            },
          ]
        },
        {
          status: '8',
          name: '作业超时',
          hintLine1: '此作业运行时长超过了设定的最长运行时长',
          hintLine2: '请检查配置及实际运行情况. 如有异常, 请根据根据任务依赖和实际情况选择它的终止状态',
          hintLine3: '',
          radioOptions: [
            {
              name: '9',
              label: '停止任务'
            },
            {
              name: 'e',
              label: '任务取消'
            },
            {
              name: '3',
              label: '正常结束'
            },
            {
              name: '5',
              label: '异常停止'
            },
          ]
        },
        {
          status: '9',
          name: '准备停止',
          hintLine1: '正在等待运行主机接收停止指令',
          hintLine2: '如果任务长期处理此状态,可能是运行主机异常',
          hintLine3: '请根据根据任务依赖和实际情况选择它的终止状态',
          radioOptions: [
            {
              name: 'e',
              label: '任务取消'
            },
            {
              name: '3',
              label: '正常结束'
            },
            {
              name: '5',
              label: '异常停止'
            },
          ]
        },
        {
          status: 'c',
          name: '正在启动',
          hintLine1: '此状态发生在启动命令已经执行, 但是并没有检测到它的运行实例',
          hintLine2: '请检查作业的配置. 如有异常, 请根据根据任务依赖和实际情况选择它的终止状态',
          hintLine3: '',
          radioOptions: [
            {
              name: 'e',
              label: '任务取消'
            },
            {
              name: '3',
              label: '正常结束'
            },
            {
              name: '5',
              label: '异常停止'
            },
          ]
        },
        {
          status: 'd',
          name: '无法停止',
          hintLine1: '此状态发生在停止命令已经执行, 但是却不能停止它的运行实例',
          hintLine2: '请检查作业的配置. 请根据根据任务依赖和实际情况选择它的终止状态',
          hintLine3: '',
          radioOptions: [
            {
              name: 'e',
              label: '任务取消'
            },
            {
              name: '3',
              label: '正常结束'
            },
            {
              name: '5',
              label: '异常停止'
            },
          ]
        },
      ]
    };
  },

  created() {
    window.addEventListener('resize', this.getHeight);
    this.getHeight();
    this.getTaskProcessList(this.myJob);
  },

  destroyed() {
    if (this.intervalReader) {
      clearInterval(this.intervalReader);
      this.intervalReader = null;
    }
  },


  methods: {
    hasPermission(url) {
      return hasPermission(url)
    },
    getOptions(dictKey) {
      return getEntries(dictKey);
    },

    destroyed() {
      if (this.intervalReader) {
        clearInterval(this.intervalReader);
        this.intervalReader = null;
      }
    },

    checkBoxRefreshChange(val) {
      if (val) {
        if (this.intervalReader) {
          clearInterval(this.intervalReader);
          this.intervalReader = null;
        }

        this.intervalReader = setInterval(() => {
          setTimeout(this.callApiTaskRefresh(), 0)
        }, 1000);
        this.$set(this.myJob, 'iconClass', "el-icon-loading");
        //this.myJob.iconClass = "el-icon-loading"
      }
      else {
        if (this.intervalReader) {
          clearInterval(this.intervalReader);
          this.intervalReader = null;
        }
        //this.myJob.iconClass = null;
        this.$set(this.myJob, 'iconClass', null);
      }
    },

    getTaskProcessList(cfgJob) {
      if (cfgJob.taskProcesses == null || cfgJob.taskProcesses.length == 0) {
        let param = {};
        param.jobId = cfgJob.id;
        param.recordCount = 10;
        param.operatorType = 'current';
        this.listLoading = true;
        apiTaskList(param)
          .then(response => {
            const data = response.data;
            if (data) {
              this.$set(cfgJob, 'taskProcesses', data);
              let lastIdx = this.myJob.taskProcesses.length - 1;
              if (lastIdx >= 0) {
                this.refreshEndTime = this.myJob.taskProcesses[lastIdx]['scheduleTime'];
                this.callApiTaskCurrent();
              }

            }
          });
      }
    },

    handleCancelClick(row) {
      this.cancelTask = row;
      this.taskCancelDialogVisible = true;
      this.remark = '';
      let idx = this.operatorOptions.findIndex(item => { return item.status == row.status });
      if (idx < 0) {
        return console.log("出错了, row.status:" + row.status);
      }

      this.hintLine1 = this.operatorOptions[idx].hintLine1;
      this.hintLine2 = this.operatorOptions[idx].hintLine2;
      this.hintLine3 = this.operatorOptions[idx].hintLine3;
      this.radioOptions = this.operatorOptions[idx].radioOptions;
      this.radioDestStatus = this.radioOptions[0].name;
    },


    checkCancelEnable(status) {
      const disabledStatus = ['3', '4', '5', '6', 'e'];
      let idx = disabledStatus.findIndex(item => { return item == status });
      return idx < 0;
    },



    checkRedolEnable(status) {
      const disabledStatus = ['3', '5', '6', 'e'];
      let idx = disabledStatus.findIndex(item => { return item == status });
      return idx >= 0;
    },

    messageSuccess() {
      this.$message({
        type: 'success',
        message: '提交成功!',
        duration: 3000
      });
    },

    handleCreateTaskComfirm() {
      let param = {};
      param.id = this.myJob.id;
      apiTaskCreate(param)
        .then(response => {
          this.listLoading = false;
          const data = response.data;
          if (data) {
            //this.myJob.currentProcess = data;
            let idx = this.myJob.taskProcesses.findIndex(item => { return item.scheduleTime > data.scheduleTime });
            if (idx >= 0) {
              this.myJob.taskProcesses.splice(idx, 0, data);
            } else {
              this.myJob.taskProcesses.push(data);
              this.refreshEndTime = data['scheduleTime'];
            }
            this.messageSuccess();
            this.callApiTaskCurrent();
          }
        });
    },

    handleTaskRedoConfirm() {
      let param = {};
      param.id = this.redoTask.id;
      apiTaskRedo(param)
        .then(response => {
          this.listLoading = false;
          const data = response.data;
          if (data) {
            //this.myJob.currentProcess = data;
            let idx = this.myJob.taskProcesses.findIndex(item => { return item.scheduleTime > data.scheduleTime });
            if (idx >= 0) {
              this.myJob.taskProcesses.splice(idx, 1, data);
            } else {
              this.myJob.taskProcesses.push(data);
              this.refreshEndTime = data['scheduleTime'];
            }
            this.myJob.taskProcesses.map(item => {
              if (item.id == this.redoTask.id) {
                item.hasRedo = '1';              }
            });
            this.messageSuccess();
            this.callApiTaskCurrent();
            this.taskRedoDialogVisible = false;
          }
        });
      this.listLoading = false;
    },

    checkCreateNewDisabled(status) {
      if (status == null) {
        return true;
      }
      const disableStatus = ['1', '2', '7', '8', '9', 'c', 'w', 'd'];
      let idx = disableStatus.findIndex(item => { return item == status });
      return idx >= 0;
    },

    getDictLabel(dictKey, dictValue) {
      return getLabel(dictKey, dictValue);
    },

    handleTaskCancelConfirm() {
      this.listLoading = true;
      let param = {};
      param.id = this.cancelTask.id;
      param.oldStatus = this.cancelTask.status;
      param.destStatus = this.radioDestStatus;
      param.cancelReason = this.getDictLabel('task_status', param.oldStatus) + "->"
        + this.getDictLabel('task_status', param.destStatus)
        + " 原因:" + this.remark.trim();
      apiTaskCancel(param)
        .then(response => {
          this.listLoading = false;
          const data = response.data;
          if (data) {
            let idx = this.myJob.taskProcesses.findIndex(item => { return item.id == data.id });
            if (idx >= 0) {
              //this.myJob.taskProcesses[idx] = data;
              this.myJob.taskProcesses.splice(idx, 1, data);
              this.messageSuccess();
              this.taskCancelDialogVisible = false;
            }
          }
        });
      this.listLoading = false;
      this.taskCancelDialogVisible = false;
      this.callApiTaskCurrent();
    },

    callApiTaskCurrent() {
      this.listLoading = true;
      let param = {};
      param.id = this.myJob.id;
      apiTaskCurrent(param)
        .then(response => {
          this.listLoading = false;
          const data = response.data;
          if (data) {
            this.$set(this, "currentProcess", data);
            this.$set(this, "currentProcessId", data.id);
            let idx = this.myJob.taskProcesses.findIndex(item => { return item.id == data.id });
            if (idx >= 0) {
              //this.myJob.taskProcesses[idx] = data;
              this.myJob.taskProcesses.splice(idx, 1, data);
            } else {
              this.myJob.taskProcesses.push(data);
              this.refreshEndTime = data['scheduleTime'];
            }
          }
        });
      this.listLoading = false;
    },

    callApiTaskRefresh() {
      let lastIdx = this.myJob.taskProcesses.length - 1;
      if (lastIdx < 0) {
        return;
      }
      let param = {};
      param.jobId = this.myJob.id;
      if (null == this.refreshEndTime) {
        param.endTime = this.myJob.taskProcesses[lastIdx]['scheduleTime'];
      } else {
        param.endTime = this.refreshEndTime;
      }
      this.listLoading = true;
      apiTaskRefresh(param)
        .then(response => {
          this.listLoading = false;
          const data = response.data;
          //console.log(data[0]);
          if (data) {
            this.$set(this, "currentProcess", data[0]);
            this.$set(this, "currentProcessId", data[0].id);
            //this.currentProcessId = data[0].id;
            let idx = this.myJob.taskProcesses.findIndex(item => { return item.id == data[0].id });
            let howmany = this.myJob.taskProcesses.length - idx;
            this.myJob.taskProcesses.splice(idx, howmany, ...data);
          }
        });
      this.listLoading = false;
    },

    //打开任务的日志文件
    handleLogFile(row) {
      let idx = this.myLogFileList.findIndex(item => { return item.id == row.id });
      if (idx >= 0) {
        //this.editableTabsValue = '' + row.id;
        this.$set(this, 'editableTabsValue', '' + row.id);
      } else {
        let newLogFileTabPane = {};
        newLogFileTabPane.id = row.id;
        newLogFileTabPane.logFileName = row.logFileName;
        newLogFileTabPane.hostName = row.hostName;
        newLogFileTabPane.scheduleTime = row.scheduleTime;
        newLogFileTabPane.iconClass = "el-icon-loading";
        if (this.currentProcess && row.id == this.currentProcess.id) {
          newLogFileTabPane.isRunning = true;
          this.$message({
            type: 'info',
            message: '当前任务.',
            duration: 3000
          });
        } else {
          newLogFileTabPane.isRunning = false;
        }
        this.myLogFileList.push(newLogFileTabPane);
        this.$set(this, 'editableTabsValue', '' + row.id);
      }
    },

    removeTab(targetName) {
      if ('-1' == targetName) {
        return;
      }

      let tabs = this.myLogFileList;
      let activeName = this.editableTabsValue;
      if (activeName == targetName) {
        tabs.forEach((tab, index) => {
          if ('' + tab.id == targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = '' + nextTab.id;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.myLogFileList = tabs.filter(tab => '' + tab.id != targetName);
      if (this.myLogFileList.length == 0) {
        this.editableTabsValue = '-1';
      }
    },

    handleClick(tab, event) {
      console.log(tab, event);
    },

    formatTime(time) {
      if (time == null || time === '') {
        return 'N/A';
      }
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    getHeight() {
      //this.myHeight = window.innerHeight - 100;
      this.conheight.height = window.innerHeight - 100 + 'px';
      this.taskProcessTableHeight = window.innerHeight - 200 + 'px';
      //this.jobTableHeight = window.innerHeight - 100 - 140 + 'px';
    },

    handleListTaskBefore() {
      let param = {};
      param.jobId = this.myJob.id;
      param.recordCount = 10;
      param.operatorType = 'before';
      param.scheduleTime = this.myJob.taskProcesses[0].scheduleTime;
      this.listLoading = true;
      apiTaskList(param)
        .then(response => {
          this.listLoading = false;
          const data = response.data;
          if (data && data.length > 0) {
            this.myJob.taskProcesses.unshift(...(data));
          } else {
            this.$message({
              type: 'info',
              message: '没有更多数据了.',
              duration: 3000
            });
          }
        });
      this.listLoading = false;
    },

    handleListTaskAfter() {
      let param = {};
      param.jobId = this.myJob.id;
      param.recordCount = 10;
      param.operatorType = 'after';
      let lastIdx = this.myJob.taskProcesses.length - 1;
      param.scheduleTime = this.myJob.taskProcesses[lastIdx].scheduleTime;
      this.listLoading = true;

      apiTaskList(param)
        .then(response => {
          this.listLoading = false;
          const data = response.data;
          if (data && data.length > 0) {
            this.myJob.taskProcesses.push(...(data));
            let lastIdx = this.myJob.taskProcesses.length - 1;
            if (lastIdx >= 0) {
              this.refreshEndTime = this.myJob.taskProcesses[lastIdx]['scheduleTime'];
            }
          } else {
            this.$message({
              type: 'info',
              message: '没有更多数据了.',
              duration: 3000
            });
          }
        });
      this.listLoading = false;
    },

  }
};
</script>

<style>
.el-dialog__body {
  padding: 10px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
</style>

<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
